<template>
  <div class="photoinfo-container">
    <h3>很美的落地大书柜 可以放超多的图书的吧</h3>
    <p class="subtitle">
      <span>发表时间：2018-09-12</span>
      <span>点击：10次</span>
    </p>
    <hr>

    <!-- 缩略图区域 -->
    <vue-preview :slides="list" @close="handleClose"></vue-preview>
    <!-- <div class="thumbs">
      <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="show(index)" :key="item.src">
    </div> -->
    <!-- 图片内容区域 -->
    <div class="content">
      很美的落地大书柜 可以放超多的图书的吧，转角的书柜以及书桌，这里可以收纳
      超多的东西，书柜，书桌这些是“七彩人生”品，双层书柜组合书柜儿童书柜。
    </div>
    <!-- 放一个现成的评论子组件 -->
    <cmt-box :id="id"></cmt-box>
  </div>
</template>
<script>
//导入评论组件
import comment from '../subcomponents/comment.vue'
export default {
  data(){
    return{
      id: this.$route.params.id, //从路由中获取到的ID
      photoinfo:{}, //图片详情
      list:[], //图片缩略图数组
    }
  },
  created(){
    this.getPhotoInfo()
    this.getThumbs()
  },
  methods:{
    getPhotoInfo(){
      //获取图片的详情
      this.$http.get('')
      .then(result=>{

      })
    },
    getThumbs(){
      //获取缩略图
      this.$http.get('https://gank.io/api/data/福利/11/' + this.id)
      .then(result=>{
        console.log(result.body)
        if(result.body){
          //循环每个图片数据，补全图片的宽和搞
          var array = [];
          result.body.results.forEach(item=>{
            var obj = {}
            obj.w = 500
            obj.h = 900
            obj.src = item.url
            obj.msrc = item.url
            array.push(obj)
          })
          console.log('array',array)
          //把完整的数据保存到 list 中
          this.list = array
        }
      })
    },
    handleClose(){
      console.log('close')
    },
    show(index){
      this.$preview.open(index,this.list)
    }
  },
  components:{//注册评论子组件
    'cmt-box':comment
  }
}
</script>
<style lang="scss" scoped>

.photoinfo-container{
  padding:3px;
  h3{
    color:#26A2FF;
    font-size:15px;
    text-align: center;
    margin:15px 0;
  }
  .subtitle{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .content{
    font-size: 13px;
    line-height: 30px;
  }
  .thumbs{
    img{
      margin:10px;
      box-shadow: 0 0 8px #999;
    }
    
  }
}
</style>


